<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>腾讯地图</title>
    <style type="text/css">
        #container {
            /*地图(容器)显示大小*/
            margin: 0 auto;
            width: 800px;
            height: 600px;
        }
    </style>
    <!--引入Javascript API GL，参数说明参见下文-->
    <script src="https://map.qq.com/api/gljs?v=1.exp&key=VUIBZ-GHCWU-IMNVF-BIYFX-XUXFE-G5BDP"></script>

</head>
<!-- 页面载入后，调用init函数 -->

<!-- <body onload="initMap()"> -->

<body>
    <!-- 定义地图显示容器 -->
    <button onclick="createMarker()">点击添加marker</button>
    <button onclick="removeMarker()">移除marker</button>
    <button onclick="change2D()">2D</button>
    <button onclick="change3D()">3D</button>
    <button onclick="setStyle()">marker样式更改有偏移</button>
    <div id="container"></div>
    <script>
        //地图初始化函数，本例取名为init，开发者可根据实际情况定义

        //定义地图中心点坐标
        var center = new TMap.LatLng(30.490835237266154, 104.08486128297159)
        //定义map变量，调用 TMap.Map() 构造函数创建地图，如果是id可直接写id名
        // var map = new TMap.Map('container', {
        var map = new TMap.Map(document.getElementById('container'), {
            viewMode: '2D',//地图显示2d或3d
            center: center,//设置地图中心点坐标
            zoom: 17.2,   //设置地图缩放级别
            pitch: 43.5,  //设置俯仰角
            rotation: 0    //设置地图旋转角度
        });
        // 使用代码控制属性，2d3d转换。
        function change2D() {
            map.setViewMode('2D');
        }
        function change3D() {
            map.setViewMode('3D');
            map.setPitch(70);
        }
        // var marker=null;
        var marker = new TMap.MultiMarker({
            map: map,
            styles: {
                // 点标记样式
                marker: new TMap.MarkerStyle({
                    width: 20, // 样式宽
                    height: 30, // 样式高
                    anchor: { x: 10, y: 30 }, // 描点位置
                }),
            },
            geometries: [
                // 点标记数据数组
                {
                    // 标记位置(纬度，经度，高度)
                    position: center,
                    id: 'marker',
                },
            ],
        });

        //创建marker事件  52-70可以不要
        // let point=(39.984104, 116.307503)
        function createMarker(obj = { lat: 39.984104, lng: 116.307503 }) {
            console.log(123);

            // if (!marker) {
            marker = new TMap.MultiMarker({
                // 每个id是yigemarker图层,id固定这个函数只能使用一次
                id: 'marker-layerAdd',
                map: map,
                styles: {
                    "marker": new TMap.MarkerStyle({
                        "width": 25,
                        "height": 35,
                        "anchor": { x: 16, y: 32 },
                        "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
                    })
                },
                geometries: [{
                    "id": 'demo',
                    "styleId": 'marker',
                    "position": new TMap.LatLng(obj.lat, obj.lng),
                    "properties": {
                        "title": "marker"
                    }
                }]
            });
            // }
        }
        //移除marker事件
        function removeMarker() {
            if (marker) {
                marker.setMap(null);
                marker = null;
            }
        }

        //初始化marker图层--添加marker
        var markerLayer = new TMap.MultiMarker({
            id: 'marker-layermapAdd',
            map: map,
            styles: {
                "marker": new TMap.MarkerStyle({
                    "width": 25,
                    "height": 35,
                    "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
                }),
                small: new TMap.MarkerStyle({
                    // 点标注的相关样式
                    width: 34, // 宽度
                    height: 46, // 高度
                    anchor: { x: 17, y: 23 }, // 标注点图片的锚点位置
                    src: 'https://mapapi.qq.com/web/lbs/visualizationApi/demo/img/small.png', // 标注点图片url或base64地址
                    color: '#333', // 标注点文本颜色
                    size: 16, // 标注点文本文字大小
                    direction: 'bottom', // 标注点文本文字相对于标注点图片的方位
                    offset: { x: 0, y: 8 }, // 标注点文本文字基于direction方位的偏移属性
                    strokeColor: '#fff', // 标注点文本描边颜色
                    strokeWidth: 2, // 标注点文本描边宽度
                }),
                big: new TMap.MarkerStyle({
                    width: 58,
                    height: 76,
                    anchor: { x: 36, y: 32 },
                    src: 'https://mapapi.qq.com/web/lbs/visualizationApi/demo/img/big.png',
                    color: '#333',
                    size: 22,
                    direction: 'bottom',
                    strokeColor: '#fff',
                    offset: { x: 0, y: 10 },
                    strokeWidth: 2,
                }),

            },
            enableCollision: true, // 开启碰撞
            geometries: [ //存在的marker
                {
                    "id": 'demo',
                    "styleId": 'marker',
                    "position": new TMap.LatLng(30.49191310295101, 104.08547270670783),
                    "properties": {
                        "title": "marker"
                    }
                },
                {
                    styleId: 'small', // 对应中的样式id
                    position: new TMap.LatLng(39.9944, 116.33066), // 标注点位置
                    content: '全聚德', // 标注点文本，可以写html字符串文本
                    offset: { y: 0, x: -5 },//偏移量
                },
            ]
        });
        //监听点击事件添加marker
        map.on("click", (evt) => {
            console.log('点中的GCJ-02坐标', evt.latLng);
            markerLayer.add({
                styleId:'marker', //添加的这个marker样式id
                position: evt.latLng,
                content:'新加内容'
            });
        });

        //
        function setStyle() {
            //更换marker样式方法
            console.log('字I型老公');
            markerLayer.setStyles({
                // marker是样式的id，同名覆盖，没有就新增。
                "marker": new TMap.MarkerStyle({
                    "width": 70,
                    "height": 35,
                    "anchor": { x: 16, y: 32 },
                    "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png',

                })
            })
        }
    </script>
</body>

</html>